<template>
  <div class="container">
    <div class="view-main">
      <el-card>
        <!-- 公共头部 -->
        <el-form :inline="true" label-width="200px" size="small">
          <el-form-item label="关键字" style="margin-left: 10px" label-width="70px">
            <el-input v-model="search.keyword" placeholder="根据文章标题搜索"></el-input>
          </el-form-item>
          <el-form-item label="状态" label-width="65px">
            <el-select v-model="search.state" placeholder="请选择">
              <el-option label="已启用" :value="1"></el-option>
              <el-option label="已禁用" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="onClear">清除</el-button>
            <el-button type="primary" @click="onSearch">搜索</el-button>
          </el-form-item>
          <el-button type="success" icon="el-icon-edit" size="small" style="float:right" @click="showAdd = true">新增技巧</el-button>
        </el-form>
        <el-alert
          :title="`数据一共${page.counts}条`"
          type="info"
          show-icon
          :closable="false"
          style="margin-bottom: 10px"
        ></el-alert>
        <el-table :data="tableList" style="width: 100%">
          <el-table-column align="center" type="index" label="序号" width="80px"></el-table-column>
          <el-table-column align="left" label="文章标题" width="380px" prop="title">
            <template #default='{ row }'>
              {{row.title}}
              <i v-if="row.videoURL"  class="el-icon-film video-button" @click="playVideo(row.videoURL)"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" label="阅读数" width="100px" prop="visits"></el-table-column>
          <el-table-column align="center" label="录入人" prop="username"></el-table-column>
          <el-table-column align="center" label="录入时间" width="160px">
            <template slot-scope="{ row }">{{row.createTime | parseTime}}</template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="{ row }">
              {{row.state === 1 ? "已启用" : "已禁用"}}</template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="200px">
            <template slot-scope="{ row }">
              <el-button type="text" @click="onPreview(row.id)">预览</el-button>
              <el-button type="text" @click="editState(row)">
                {{row.state === 1 ? "禁用" : "启用"}}</el-button>
              <el-button type="text" :disabled="row.state === 0" @click="edit(row.id)">修改</el-button>
              <el-button type="text" :disabled="row.state === 0" @click="deleteBtn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="end" align="end" style="margin-top:10px">
          <el-pagination
            layout="total,prev,pager,next,sizes,jumper"
            :page-size="page.pagesize"
            :page-sizes="[5, 10, 20, 50]"
            :total="page.counts"
            @size-change="handleSizeChange"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
    </div>
    <!-- 视频弹出层 -->
    <VideoPlay :show.sync="showVideo" :videoURL='videoURL'/>
    <!-- 预览文章弹出层 -->
    <ArticlesPreview :show-dialog.sync='showPreview' ref='ArticlesPreview' />
    <!-- 添加/修改 弹出层 -->
    <ArticlesAdd :showDialog.sync="showAdd" ref='ArticlesAdd'/>
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/articles'
import VideoPlay from '../components/video-play.vue'
import ArticlesPreview from '../components/articles-preview.vue'
import ArticlesAdd from '../components/articles-add.vue'
export default {
  components: { VideoPlay, ArticlesPreview, ArticlesAdd },
  data () {
    return {
      tableList: [],
      page: {
        page: 1, // 当前页码
        pagesize: 10, // 页大小
        counts: 0 // 总记录数
      },
      search: {
        keyword: '', // 搜索关键字
        state: '' // 搜索状态
      },
      showVideo: false, // 视频弹层
      videoURL: '', // 当前视频地址
      showPreview: false, // 预览弹层
      showAdd: false // 添加/修改 弹层
    }
  },
  created () {
    this.getList(this.page)
  },
  methods: {
    async getList (data) {
      const { data: res } = await list(data)
      this.tableList = res.items
      this.page.page = res.page
      this.page.counts = res.counts
    },
    changePage (newPage) {
      this.page.page = newPage
      this.getList(this.page)
    },
    // 改变每页数据条数pagesize时触发该函数
    handleSizeChange (newSize) {
      this.page.pagesize = newSize
      this.getList(this.page)
    },
    async editState (row) {
      const { id, state } = row
      await changeState({ id, state: state === 1 ? 0 : 1 })
      this.getList(this.page)
      this.$message.success('切换状态成功')
    },
    async deleteBtn (id) {
      try {
        await this.$confirm('您确定永久删除该文章吗?', '提示', { type: 'warning' })
        await remove({ id })
        this.getList(this.page)
        this.$message.success('删除成功')
      } catch (error) {
        this.$message('取消删除操作')
        console.log(error)
      }
    },
    // 搜索
    onSearch () {
      this.page.page = 1
      const searchData = {}
      for (var k in this.search) {
        if (this.search[k] !== '') {
          searchData[k] = this.search[k]
        }
        this.getList({ ...searchData, ...this.page })
      }
    },
    // 清除
    onClear () {
      console.log('起飞')
      this.search = {
        keyword: '', // 搜索关键字
        state: '' // 搜索状态
      }
      this.page.page = 1
      this.getList(this.page)
    },
    playVideo (url) {
      this.videoURL = url
      console.log(this.videoURL)
      this.showVideo = true
    },
    async onPreview (id) {
      await this.$refs.ArticlesPreview.getArticleDetail(id)
      this.showPreview = true
    },
    edit (id) {
      this.$refs.ArticlesAdd.getDetail(id)
      this.showAdd = true
    }
  }
}
</script>

<style scoped lang='less'>
.view-main {
  padding: 5px 10px 0 10px;
  margin-bottom: 10px;
  ::v-deep .el-table th.is-leaf {
    background-color: #fafafa !important;
    border-bottom: 2px solid #e8e8e8;
  }
  .video-button {
    color: deepskyblue;
    font-size: 18px;
    cursor: pointer;
    position: absolute;
    top: calc(50% - 9px);
  }
}
</style>
